This is my Javascript:
var productId=this.dataset.product
var action=this.dataset.action
var a = document.getElementById(productId);
var size = a.options[a.selectedIndex].value;
var l = toString(document.getElementById(productId).selectedIndex);
a.selectedIndex=l;
updateUserOrder(productId, action, size)
In this I am able to get the productId , action , a , size , l correctly but I am not able to set the index selected thereafter. When a user on my site clicks on add button the product is added to cart with the correct size and all and also the page refreshes . But as tried in my code the selected option does not change as I want it to and remains the default (index=0).
This is my html for reference:
<select class="selection-2 border" data-product={{product.id}}
style="border: cadetblue;" name="size" id="{{product.id}}">
<option value="S" id="S">S</option>
<option value="M" id="M">M</option>
<option value="L" id="L">L</option>
</select>
My problem summed up is that for example a user chooses an option which is at second index then after the page refreshes(as my code executes) the select box should show default option as the option with second index which is currently not happening.